chore: Tailwind CSS v4 migration#4139
Open
kathiekiwi wants to merge 17 commits into
Open
Conversation
|
Contributor
|
Important Review skippedToo many files! This PR contains 203 files, which is 53 over the limit of 150. To get a review, narrow the scope: Upgrade to a paid plan to raise the limit. ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (203)
You can disable this status message by setting the Use the checkbox below for a quick retry:
WalkthroughThis PR migrates the webapp from Tailwind CSS v3 to v4. It rewrites Changes
Sequence Diagram(s)Not applicable — this PR consists of styling/className updates and a string identifier rename with no new interaction flows. Related PRs: None identified. Suggested labels: Suggested reviewers: webapp maintainers familiar with Tailwind CSS and the design system primitives Poem A rabbit hopped through classNames wide, 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
@trigger.dev/build
trigger.dev
@trigger.dev/core
@trigger.dev/python
@trigger.dev/react-hooks
@trigger.dev/redis-worker
@trigger.dev/rsc
@trigger.dev/schema-to-json
@trigger.dev/sdk
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
CSS-first @theme in app/tailwind.css: static palettes plus semantic color tokens as CSS variables, overridable per theme. Tailwind runs through @tailwindcss/postcss (Remix integration off). Plugins upgraded or replaced with v4 equivalents; tailwind-merge bumped to v3. Utility classes codemodded by the official upgrade tool. Fixed two invalid arbitrary variants the upgrade surfaced (table sticky cell :has(), number input attribute variant).
prism-react-renderer passes extra props through, so key ended up in the spread and triggered a React warning. Key is already set directly on the elements.
Adds surface (background-deep/hover/raised, surface-control/-hover/-active), border (border-bright/brighter/brightest) and text (text-faint) tokens to the themable layer, and sweeps ~930 raw charcoal-* usages across the dashboard to use them. Remaining raw charcoal usages are contrast-fixed decoration on colored accents, intentionally theme-independent.
Run-status and chart colors in JS now reference var(--color-*) tokens (run-status palette added to the theme). Streamdown container vars derive from semantic tokens instead of hardcoded dark HSL values; removed dead forced-dark code block overrides. dark: variant is now driven by data-theme on <html> (set to dark) instead of the OS preference, with color-scheme following the theme.
Shiki (streamdown), prism (CodeBlock) and CodeMirror themes now read from --color-code-* and --color-editor-* palettes declared in tailwind.css; callout variants use --color-callout-* tokens. A light theme can restyle all of them by overriding variables only.
Activity sparkbars on the project index use the shared run-status palette; chart grids, ticks, reference lines and loading skeletons read semantic tokens; usage meter and progress colors use success/warning/error tokens.
The upgrade codemod treated string literals in .ts files as utility classes: realtimeBackend "shadow" flag values, compute template creation "shadow" mode, and randomWords dictionary entries were renamed to shadow-sm/ring-3/ outline-solid. Restores the original values so persisted flags keep parsing.
…polation framer-motion can't parse var() strings, so animated colors (usage bar gradient, dashboard limit progress ring) snap instead of tweening. Adds a useThemeColor hook that resolves theme variables via getComputedStyle on mount, with dark-theme fallbacks for SSR.
Tailwind v4's default palette is oklch, which framer-motion can't interpolate. useThemeColor now round-trips the resolved color through a 1x1 canvas to get an animatable rgb value.
Align size-[1.125rem] with the 4.5 spacing token, use a range for the tailwindcss version, document the intentional ::-moz-selection duplicate, and share the glow gradient stop list via a custom property.
| <AlertDialogPrimitive.Overlay | ||
| className={cn( | ||
| "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-sm transition-opacity animate-in fade-in", | ||
| "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-xs transition-opacity animate-in fade-in", |
Contributor
There was a problem hiding this comment.
🟡 Modal and callout backdrop blur reduced by half during migration
The backdrop blur on overlays and callouts is halved (backdrop-blur-xs at apps/webapp/app/components/primitives/Alert.tsx:26) by using the wrong Tailwind v4 equivalent, so modals and callouts appear noticeably less blurred behind their content.
Impact: Dialog overlays, alert overlays, and callout backgrounds will look sharper/less frosted than before.
Tailwind v3 → v4 blur scale mismatch
In Tailwind v3, backdrop-blur-sm = backdrop-filter: blur(4px). In Tailwind v4, backdrop-blur-sm is still 4px, but a new backdrop-blur-xs = 2px was added below it. The migration incorrectly mapped v3's backdrop-blur-sm to v4's backdrop-blur-xs instead of keeping it as backdrop-blur-sm.
Affected files:
apps/webapp/app/components/primitives/Alert.tsx:26apps/webapp/app/components/primitives/Dialog.tsx:29apps/webapp/app/components/primitives/Callout.tsx:96apps/webapp/app/components/primitives/Callout.tsx:121apps/webapp/app/components/primitives/Callout.tsx:149
All instances change backdrop-blur-sm (4px) → backdrop-blur-xs (2px). The correct v4 equivalent is backdrop-blur-sm (unchanged).
Suggested change
| "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-xs transition-opacity animate-in fade-in", | |
| "fixed inset-0 z-50 bg-background-dimmed/80 backdrop-blur-sm transition-opacity animate-in fade-in", |
Was this helpful? React with 👍 or 👎 to provide feedback.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Migrates the webapp from Tailwind CSS 3.4 to 4.x.
CSS-first
@themeinapp/tailwind.cssreplacestailwind.config.js. Semantic color tokens are CSS variables overridable per theme support.Note: the default palette is now oklch.
Testing
Typecheck, format and lint pass. Verified visually against the local dashboard — colors, borders, scrollbars, animations and focus s